<template>

    <div class="panel-style panel-box">
        <div class="pad-b-20 flex v-align-c">
            <h2 class="font-18 flex-item">商品销售排名</h2>
            <el-tabs v-model="dateType" class="mar-r-10" @tab-click="handleClick">
                <el-tab-pane label="今天" name="1"></el-tab-pane>
                <el-tab-pane label="昨天" name="2"></el-tab-pane>
                <el-tab-pane label="近7天" name="3"></el-tab-pane>
                <el-tab-pane label="近30天" name="4"></el-tab-pane>
            </el-tabs>
           <!-- <span class="more-btn mar-l-30">更多</span>-->
        </div>
        <div class="pad-b-20">
            <el-table :data="dataList"
                      v-loading="listLoading" element-loading-text="加载中"
                      style="width: 100%">
                <el-table-column width="60" label="排序" align="center" type="index"></el-table-column>
                <el-table-column min-width="160" label="商品名称" prop="goodsTitle"></el-table-column>
                <el-table-column min-width="70" label="成交数量" align="center" prop="goodsNum"></el-table-column>
                <el-table-column min-width="70" label="成交金额" align="center" prop="goodsTotalPrice">
                    <template slot-scope="scope">
                        ￥{{ scope.row.goodsTotalPrice }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>


</template>

<style>

</style>
<script>
  import { statGoodsSell } from '@/api/goods/goods-statistics'

  export default {
    data() {
      return {
        dateType: '1',
        dataList: [],
        listLoading: false
      }
    },
    // 初始化页面
    created() {
      this.initGoodsEdit()
    },
    methods: {
      initGoodsEdit() {
        const enterpriseId = this.getEnterpriseId()
        const data = {
          enterpriseId: enterpriseId,
          dateType: this.dateType
        }
        this.listLoading = true
        statGoodsSell(data).then(response => {
          this.dataList = response.data
          this.listLoading = false
        })
      },
      handleClick() {
        this.initGoodsEdit()
      }
    }
  }

</script>
